<template>
  <div class="app-container flex1 flex-col over-hidden purchase-plan-list">
    <el-form class="flex-shrink-0">
      <el-form
        class="flex-shrink-0"
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="100px"
      >
        <el-form-item label="计划编号" prop="planCode">
          <el-input
            v-model="queryParams.planCode"
            placeholder="请输入计划编号"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="计划名称" prop="planName">
          <el-input
            v-model="queryParams.planName"
            placeholder="请输入计划名称"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="queryParams.status"
            placeholder="请选择状态"
            clearable
            size="small"
            style="width: 240px"
          >
            <el-option
              v-for="status in statusArr"
              :key="status.dictValue"
              :label="status.dictLabel"
              :value="status.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          >
            查询
          </el-button>
          <el-button
            icon="el-icon-refresh"
            size="mini"
            @click="resetQuery('queryForm')"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-form>

    <div class="flex-shrink-0 opt-btn">
      <el-button type="primary" size="small" @click="handleAddProperty">
        新增
      </el-button>
      <el-button
        type="primary"
        size="small"
        :disabled="selectedData.length !== 1"
        @click="handleSelectSupplier"
      >
        选择供应商
      </el-button>
      <el-button
        type="primary"
        size="small"
        :disabled="selectedData.length !== 1"
        @click="handleSendRequest"
      >
        发送采购请求
      </el-button>
    </div>
    <!-- 剩余空间通过 flex1 全部分给表格，over-hidden 必须使用 -->
    <div class="flex1 over-hidden">
      <el-table
        :data="tableData"
        height="100%"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        ref="multipleTable"
      >
        <el-table-column
          type="selection"
          width="50"
          align="center"
        ></el-table-column>
        <el-table-column
          align="center"
          label="计划编号"
          prop="planCode"
        ></el-table-column>
        <el-table-column
          align="center"
          label="计划名称"
          prop="planName"
        ></el-table-column>
        <el-table-column
          align="center"
          label="申报单位"
          prop="companyName"
        ></el-table-column>
        <el-table-column
          align="center"
          label="供应商"
          prop="supplier"
        ></el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <span> {{ scope.row.planStatus | dictFilter(statusArr) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="创建人"
          prop="creator"
        ></el-table-column>
        <el-table-column
          align="center"
          label="创建时间"
          prop="createTime"
        ></el-table-column>
        <el-table-column
          align="center"
          label="备注"
          prop="remark"
        ></el-table-column>
        <el-table-column align="center" label="操作" width="240">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleDisplayDetail(scope.row.planCode)"
              >详情
            </el-button>
            <el-button
              type="primary"
              size="small"
              @click="handleEdit(scope.row.planCode)"
              >编辑
            </el-button>
            <el-button
              type="primary"
              size="small"
              @click="handleDelete(scope.row.planCode)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      class="text-center bgfff pd10 flex-shrink-0"
      layout="total, sizes, prev, pager, next, jumper"
      :current-page.sync="pageNum"
      :page-sizes="[10, 20, 30, 50]"
      :page-size.sync="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="total"
    >
    </el-pagination>
    <PurchasePlan
      v-if="dialogVisible"
      :isAdd="isAdd"
      :isView="isView"
      :updateParams="updateParams"
      @confirm="handleUpdateConfirm"
      @cancel="handleCancel"
    ></PurchasePlan>
    <!-- 选择供应商弹窗 -->
    <el-dialog
      title="选择供应商"
      top="15vh !important"
      width="400px"
      :visible="selectSupplierDialog"
      @close="selectSupplierDialog = false"
    >
      <el-form
        :model="selectSupplierForm"
        label-width="120px"
        ref="selectSupplierForm"
      >
        <el-form-item label="计划名称" prop="planName">
          <el-input
            class="w200"
            v-model="selectSupplierForm.planName"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="供应商名称" prop="supplier">
          <el-select class="w200" v-model="selectSupplierForm.supplier">
            <el-option
              v-for="status in supplierArr"
              :key="status.dictValue"
              :label="status.dictLabel"
              :value="status.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="update-btn">
        <el-button type="primary" size="small" @click="selectedSupplierConfirm">
          确定
        </el-button>
        <el-button
          type="warning"
          size="small"
          @click="selectSupplierDialog = false"
        >
          取消
        </el-button>
      </div>
    </el-dialog>
    <!-- 发送采购请求弹窗 -->
    <el-dialog
      title="发送采购请求"
      top="15vh !important"
      width="500px"
      :visible="sendRequestDialog"
      @close="sendRequestDialog = false"
    >
      <div class="content"> 您正在操作将{{ sendRequestText }}进行采购，请确认</div>
      <div class="update-btn">
        <el-button type="primary" size="small" @click="sendRequestConfirm">
          确定
        </el-button>
        <el-button
          type="warning"
          size="small"
          @click="sendRequestDialog = false"
        >
          取消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { tableMixin } from "@/mixins/index";
import { dictFilter } from "@/utils/filters/common";
import PurchasePlan from "../components/purchasePlan.vue";

export default {
  mixins: [tableMixin],
  filters: { dictFilter },
  components: { PurchasePlan },
  data() {
    return {
      total: 0,
      tableData: [
        {
          planCode: 0,
          planName: "第一计划",
          companyName: "第一公司",
          supplier: "第一供应商",
          planStatus: "01",
          creator: "李丽",
          createTime: "2022-04-15",
          remark: "备注信息1111",
          manager: "第一主管",
          pm: "第一项目经理",
          materialMan: "第一材料员",
        },
      ],

      loading: false,
      statusArr: [
        { dictValue: "01", dictLabel: "待请求" },
        { dictValue: "02", dictLabel: "待接收" },
        { dictValue: "03", dictLabel: "已接收" },
        { dictValue: "04", dictLabel: "已拒绝" },
      ],
      queryParams: {
        companyName: "",
        societyCode: "",
        status: "",
      },
      dialogVisible: false,
      isAdd: true,
      isView: false,
      updateParams: {
        fileList: [],
      },
      // 选择供应商弹窗
      selectSupplierDialog: false,
      selectSupplierForm: {},
      supplierArr: [
        {
          dictValue: "01",
          dictLabel: "深圳一飞冲天有限公司",
        },
        {
          dictValue: "02",
          dictLabel: "深圳牛气冲冲有限公司",
        },
      ],
      sendRequestDialog: false,
      sendRequestText: "",
    };
  },
  created() {},
  computed: {},
  methods: {
    getList() {},
    // 新增
    handleAddProperty() {
      this.isAdd = true;
      this.isView = false;
      this.updateParams = {};
      this.dialogVisible = true;
      this.$refs.updateForm && this.$refs.updateForm.resetFields();
    },
    // 选择供应商
    handleSelectSupplier() {
      this.selectSupplierForm.planName = this.selectedData[0].planName;
      this.selectSupplierDialog = true;
    },
    // 发送采购请求
    handleSendRequest() {
      const item = this.selectedData[0];
      const displayText = `计划编号"${item.planCode}"，计划名称"${item.planName}"发送至供应商"${item.supplier}"`;
      this.sendRequestText = displayText;
      this.sendRequestDialog = true;
    },
    handleDisplayDetail(planCode) {
      this.isView = true;
      this.updateParams = this.tableData.filter(
        (item) => item.planCode === planCode
      )[0];
      this.dialogVisible = true;
    },
    handleEdit(planCode) {
      this.isAdd = false;
      this.isView = false;
      this.updateParams = this.tableData.filter(
        (item) => item.planCode === planCode
      )[0];
      this.dialogVisible = true;
    },
    handleDelete(planCode) {
      this.$alert("确定删除该条采购计划吗？", "删除采购计划", {
        confirmButtonText: "确定",
        callback: () => {
          const currentIndex = this.tableData.findIndex(
            (item) => item.planCode === planCode
          );
          this.tableData.splice(currentIndex, 1);
          this.msgSuccess("删除成功！");
        },
      });
    },
    handleUpdateConfirm() {
      this.msgSuccess("操作成功！");
      this.updateParams.planCode = this.tableData.length;
      this.updateParams.creator = "刘四季";
      this.updateParams.createTime = new Date();
      this.updateParams.planStatus = "01";
      this.updateParams.supplier = this.updateParams.supplier || "";
      this.updateParams.createTime = this.updateParams.createTime || "2022-04-21";
      const updateList = this.isAdd
        ? [...this.tableData, { ...this.updateParams }]
        : [...this.tableData];
      this.tableData = updateList;
      this.handleCancel();
    },
    handleCancel() {
      this.dialogVisible = false;
    },
    selectedSupplierConfirm() {
      if (this.selectSupplierForm.supplier) {
        const currentPlanCode = this.selectedData[0].planCode;

        const supplierName = this.supplierArr.filter(
          (item) => item.dictValue === this.selectSupplierForm.supplier
        )[0].dictLabel;

        const currentPlan = this.tableData.filter(
          (item) => item.planCode === currentPlanCode
        )[0];
        currentPlan.supplier = supplierName;

        // let index = null;
        // this.tableData.map((item, i) => {
        //   if (item.planCode === currentPlanCode) {
        //     index = i;
        //   }
        // })
        // this.tableData[index].supplier = supplierName;
        this.selectSupplierDialog = false;
      }
    },
    sendRequestConfirm() {
        this.msgSuccess('发送采购请求成功！');
        this.sendRequestDialog = false;
    }
  },
};
</script>

<style scoped lang="scss">
.purchase-plan-list {
  height: 100%;
  .opt-btn {
    padding: 20px;
  }
  .img-info {
    .title {
      padding-bottom: 10px;
      margin-bottom: 10px;
    }
  }
  .update-btn {
    padding-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
